<template>
  <div class="container">
    <el-container>
      <el-header>
        <div class="title">
          组织架构
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" style="height: 100%;">
          <h3 style="color: red;">架构方案：架构1</h3>
          <el-tree
            :data="data"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="rptare" @click="addTreeNode(node, data)">
                <i class="el-icon-more"></i>
              </span>
            </span>
          </el-tree>
        </el-aside>
        <el-main>
          <div class="top_button">
            <el-button size="small" type="danger">架构维护</el-button>
            <el-button size="small" type="danger">生成正式版</el-button>
            <el-button size="small" type="danger">保存草稿</el-button>
            <el-button size="small" type="danger">导出架构</el-button>
            <el-button size="small" type="danger">返回</el-button>
          </div>
          <div class="content">
            <div class="content_title">
              <p>节点信息</p>
              <el-button size="small" class="cc_btn">编辑</el-button>
            </div>
            <div class="content_block">
              <el-form label-width="90px" label-position="right">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="节点信息" required>
                      S00000002
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="节点名称" required>
                      S00000002
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="层级">
                      渠道产品线
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="排序">
                      <el-input-number v-model="form.sort"></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="上级节点" required>
                      <el-select v-model="form.shangji">
                        <el-option value="上级1">上级1</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <div class="content_title">
              <p>节点信息</p>
            </div>
            <div class="content_block">
              <div style="float: right;">
                <el-button size="small" class="cc_btn">新增</el-button>
              </div>
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="雇员编号">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="在职时间">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="离职时间">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <!-- </el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="content_title">
              <p>客户信息</p>
            </div>
            <div class="content_block">
              <div>
                <el-form label-width="90px" label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="客户代码">
                        <el-input v-model="form.code"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="客户名称">
                        <el-input v-model="form.code"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-button size="small" class="cc_btn" style="margin-left: 10px;">查询</el-button>
                      <el-button size="small" class="cc_btn">新增</el-button>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="客户代码"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="客户名称">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <!-- </el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="content_title">
              <p>终端信息</p>
            </div>
            <div class="content_block">
              <div>
                <el-form label-width="90px" label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="终端代码">
                        <el-input v-model="form.code"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="终端名称">
                        <el-input v-model="form.code"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-button size="small" class="cc_btn" style="margin-left: 10px;">查询</el-button>
                      <el-button size="small" class="cc_btn">新增</el-button>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="终端编号"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="终端名称">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <!-- </el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="架构" :visible.sync="dialogVisible" width="240">
      <div>
        <div style="display: flex;align-item: center;">
          <i class="el-icon-plus"></i>
          <el-button class="dialog_span" @click="addData('新增同级')">新增同级</el-button>
        </div>
        <div style="display: flex;align-item: center;">
          <i class="el-icon-plus"></i>
          <el-button class="dialog_span" @click="addData('新增下级')">新增下级</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogVisibleAdd">
      <div>
        <el-form label-width="130px" label-position="right">
          <el-form-item label="层级:" required>
            <el-radio-group v-model="radio">
              <el-radio :label="3">同级</el-radio>
              <el-radio :label="6">下级</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="父级部门:">
            <el-input v-mode="form.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="部门名称:">
            <el-input v-mode="form.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="子级部门名称:">
            <el-input v-mode="form.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="负责人:">
            <el-select v-model="type" placeholder="请选择">
              <el-option value='0'>跳过数据</el-option>
              <el-option value='1'>直接覆盖</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门描述:">
            <el-input
              type="textarea"
              v-mode="form.name"
              placeholder="请输入"
              maxlength="300"
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="状态:" required>
            <el-radio-group v-model="radio">
              <el-radio :label="3">是</el-radio>
              <el-radio :label="6">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  let id = 1000;
  export default {
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        dialogVisibleAdd: false, // 添加弹窗
        title: '',
        dialogVisible: false,
        data: JSON.parse(JSON.stringify(data)),
        form: {
          sort: 1,
          shangji: ''
        },
        tableData: [
          {
            name: '我是测试数据'
          }
        ]
      }
    },

    methods: {
      addData(title) {
        this.title = title
        this.dialogVisibleAdd = true
      },
      addTreeNode(node, data) {
        this.dialogVisible = true
      }
    }
  };
</script>

<style lang="less" scoped>
.container {
  background: #ccc;
  padding: 3px;
  height: 100%;
  width: 100%!important;
  .el-container {
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .el-header {
    padding: 0;
  }
  .el-aside {
    background: #fff;
    height: 100%;
  }
  .el-main {
    padding: 0 10px;
    height: 100%;
    .top_button {
      .el-button {
        width: 90px;
        background: red;
      }
    }
    .content {
      padding: 10px;
      background: #FFF;
      .content_title {
        display: flex;
        justify-content: space-between;
      }
      .cc_btn {
        background: red;
        color: #fff;
      }
      .content_block {
        background: #ccc;
        padding: 10px;
        /deep/.el-form-item {
          margin-bottom: 5px;
          .el-form-item__label {
            line-height: 30px;
          }
          .el-form-item__content {
            line-height: 30px;
            .el-input__inner {
              line-height: 30px;
              height: 30px;
            }
            .el-input-number{
              line-height: 30px;
              .el-input-number__decrease, .el-input-number__increase {
                top: 0;
              }
            }
            .el-input__icon {
              line-height: 30px; 
            }
          }
        }
      }
    }
  }
}
.rptare {
  transform:rotate(90deg);
  -ms-transform:rotate(90deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  -o-transform:rotate(90deg); /* Opera */
  /deep/.el-icon-more:hover {
    color: #0066ff;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.title {
  background: #fff;
  padding-left: 30px;
  position: relative;
  line-height: 50px;
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 15px;
    background: red;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.el-dialog {
  .dialog_span {
    width: 120px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .el-icon-plus {
    display: flex;
    align-center: center;
    justify-content: center;
  }
}
</style>